<template>
	<view class="distribution">
		<!-- 用户信息 -->
		<view class="userInfo flex-r-c-c" style="background-image: url(https://yft.yangfatang.cn/upload/bg/bg.png);">
			<image :src="distributionData.userimg" mode="" v-if="type == 1"></image>
			<image :src="agentData.userimg" mode="" v-else></image>
			<view class="list_r">
				<view class="list_r_t flex-r-b-c">
					<view class="name" v-if="type == 1">{{distributionData.nickname}}</view>
					<view class="name" v-else>{{agentData.nickname}}</view>
					<view class="text" @tap.stop="goAccumulation">累计收益 <u-icon style="margin-left: 10rpx;"
							name="arrow-right" size="20" color="#FFF"></u-icon>
					</view>
				</view>
				<view class="list_r_b flex-r-b-c">
					<!-- <view class="titleBtn">{{distributionData.identity}}</view> -->
					<view class="titleBtn">会员</view>
					<view class="money" v-if="type == 1">{{distributionData.grandtotal}}</view>
					<view class="money" v-else>{{agentData.idname}}</view>
				</view>
			</view>
			<view class="list_b">关注健康自然之美</view>
		</view>
		<!-- 统计 -->
		<view class="statistics flex-r-a-c">
			<view class="list">
				<view class="name">新增人数</view>
				<view class="number" v-if="type == 1"><text>{{distributionData.newpeople}}</text>人</view>
				<view class="number" v-else><text>{{agentData.day_num}}</text>人</view>
			</view>
			<view class="list">
				<view class="name">今日收益</view>
				<view class="number" v-if="type == 1"><text>{{distributionData.todaytotal}}</text>元</view>
				<view class="number" v-else><text>{{agentData.dayIncome}}</text>元</view>
			</view>
			<view class="list">
				<view class="name">下级人数</view>
				<view class="number" v-if="type == 1"><text>{{distributionData.subordinates}}</text>人</view>
				<view class="number" v-else><text>{{agentData.num}}</text>人</view>
			</view>
		</view>
		<!-- 账户信息 -->
		<view class="accountInfo">
			<view class="list_t flex-r-b-c">
				<view class="flex-r-s-c">
					<image src="/static/mine/ye.png" mode=""></image>
					<view class="balance" v-if="type == 1">账户余额 <text>{{distributionData.balance}}</text></view>
					<view class="balance" v-else>账户余额 <text>{{agentData.balance}}</text></view>
				</view>
				<view v-if="type == 2" class="goodsParagraph">货款余额 <text
						style="display: inline-block; margin-left: 10rpx; font-size: 32rpx;">{{agentData.goods_price}}</text>
				</view>
			</view>
			<view class="list_b flex-r-b-c" style="flex-wrap: wrap;">
				<view class="list flex-r-a-c" @tap.stop="goWithdrawal">
					<image src="/static/mine/ktx.png" mode=""></image>
					<view class="list_c">
						<view class="text">可提现</view>
						<view class="money" v-if="type == 1">{{distributionData.withdrawable}} <text>元</text></view>
						<view class="money" v-else>{{agentData.withdraw_price}} <text>元</text></view>
					</view>
					<u-icon name="arrow-right" color="#ACACAC" size="20" style="margin-top: 20rpx;"></u-icon>
				</view>
				<view class="list flex-r-a-c" @tap.stop="goSettlement">
					<image src="/static/mine/wjs.png" mode=""></image>
					<view class="list_c">
						<view class="text">未结算</view>
						<view class="money" v-if="type == 1">{{distributionData.unsettlement}} <text>元</text></view>
						<view class="money" v-else>{{agentData.no_price}} <text>元</text></view>
					</view>
					<u-icon name="arrow-right" color="#ACACAC" size="20" style="margin-top: 20rpx;"></u-icon>
				</view>
				<view class="list flex-r-a-c" v-if="type == 2" style="margin-top: 10rpx;" @tap.stop="go(3)">
					<image src="/static/icon/czhk_icon.png" mode=""></image>
					<view class="list_c">
						<view class="text">充值货款</view>
					</view>
					<u-icon name="arrow-right" color="#ACACAC" size="20" style="margin-top: 20rpx;"></u-icon>
				</view>
				<view class="list flex-r-a-c" v-if="type == 2" style="margin-top: 10rpx;" @tap.stop="go(2)">
					<image src="/static/icon/hkxh_icon.png" mode=""></image>
					<view class="list_c">
						<view class="text">货款消耗</view>
					</view>
					<u-icon name="arrow-right" color="#ACACAC" size="20" style="margin-top: 20rpx;"></u-icon>
				</view>
			</view>
		</view>
		<!-- icon栏 -->
		<view class="iconList flex-r-a-c" v-if="type == 1">

			<view class="list" v-for="(item,index) in distributionData.navigation" :key="index" @tap="goUrl(item.url)">
				<image :src="item.img" mode=""></image>
				<view class="text">{{item.name}}</view>
			</view>

		</view>

		<view class="iconList flex-r-s-c" style="flex-wrap: wrap;" v-else>

			<view class="list" style="width: 25%;" v-for="(item,index) in agentData.menu" :key="index"
				@tap="goUrl(item.url)">
				<image :src="item.icon" mode=""></image>
				<view class="text">{{item.name}}</view>
			</view>

		</view>

		<!-- 代理邀请 -->
		<u-popup class="invitation" v-model="isInvitationShow" mode="center" width="80%" height="440" closeable
			border-radius="30">
			<view style="height: 440rpx; overflow: hidden;">
				<view class="title" style="margin-top: 80rpx; text-align: center; font-size: 32rpx; color: #6A6A6A;">
					选择代理商级别</view>
				<!-- 下拉框 -->
				<view @tap.stop="dropDownShow = true" class="flex-r-b-c"
					style="width: 80%; height: 88rpx; margin: 40rpx auto; background-color: #F2F2F2; box-sizing: border-box; padding: 0 30rpx; border-radius: 18rpx;">
					<view class="text" style="color: #45806E; font-size: 28rpx; font-weight: 800;">
						{{inputValue == '' ? '选择代理商级别' : inputValue}}</view>
					<image src="/static/icon/icon-xl@3x.png" mode="widthFix" style="width: 66rpx; height: 66rpx;">
					</image>
				</view>
				<u-picker mode="selector" v-model="dropDownShow" :range="actionSheetList" range-key="rank"
					@confirm="choice"></u-picker>
				<!-- 按钮栏 -->
				<view class="btn_box flex-r-a-c" style="margin-top: 80rpx;">
					<view @tap.stop="isInvitationShow = false"
						style="width: 232rpx; height: 72rpx; line-height: 72rpx; text-align: center; border-radius: 40rpx; background-color: #E3E3E3; color: #999999; font-weight: bold;">
						取消</view>
					<button @tap.stop="shareBtn"
						open-type="share"
						class="btn_none"
						style="width: 232rpx; height: 72rpx; line-height: 72rpx; text-align: center; border-radius: 40rpx; background-color: #45806E; color: #FFFFFF; font-size: 28rpx; font-weight: 500;">
						分享并邀请</button>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: null,
				dropDownShow: false, // 下拉框
				isInvitationShow: false, // 邀请代理弹框
				distributionData: {}, // 分销中心数据
				agentData: {}, // 代理中心数据
				actionSheetList: [],
				inputValue: '',
				agentId: '',
				share: {
					/*分享参数*/
					title: '氧发堂',
					path: '/pages/tabBat/home/home'
				},
			};
		},
		onLoad(el) {
			this.type = el.type
			el.type == 1 ? this.getDistribution() : this.getAgentData()
			if (el.type == 2) {
				uni.setNavigationBarTitle({
					title: '代理中心'
				})
			}
		},
		onShareAppMessage(res) {
			return {
				title: this.share.title,
				path: this.share.path,
				imageUrl: this.share.imageUrl,
				desc: this.share.desc,
				content: this.share.content,
				success(res) {
					uni.showToast({
						title: '分享成功',
						icon: "none"
					})
					this.share = {
						/*分享参数*/
						title: '氧发堂',
						path: '/pages/tabBat/home/home'
					}
				},
				fail(res) {
					uni.showToast({
						title: '分享失败',
						icon: 'none'
					})
				}
			}
		},
		methods: {
			// 获取分销中心数据
			getDistribution() {
				let that = this
				that.$api.distribution_data().then(res => {
					console.log(res)
					that.distributionData = res.data.data
				})
			},
			// 获取代理中心数据
			getAgentData() {
				let that = this
				that.$api.getAgent_data().then(res => {
					console.log(res)
					that.agentData = res.data.data
					that.getAgentGrade()
				})
			},
			// 获取代理等级列表
			getAgentGrade() {
				let that = this
				that.actionSheetList = []
				that.$api.getAgentGrade().then(res => {
					console.log(res)
					that.actionSheetList = that.actionSheetList.concat(res.data.data)
				})
			},
			// 跳转链接
			goUrl(url) {
				console.log(url)
				if (url == '/distribution/myTeam/myTeam') {
					if (this.distributionData.idcrode > 1) {
						uni.navigateTo({
							url: '/distribution/myTeam/myTeam?type=2'
						})
					} else {
						uni.navigateTo({
							url: '/distribution/myTeam/myTeam?type=1'
						})
					}

				} else if (url == '/distribution/rankingList/rankingList') {
					uni.navigateTo({
						url: '/distribution/rankingList/rankingList?type=' + this.type
					})
				} else if (url == '/btn') {
					this.isInvitationShow = true
				} else {
					console.log(1)
					uni.navigateTo({
						url: url
					})
				}
			},
			// 累计详情
			goAccumulation() {
				uni.navigateTo({
					url: '/distribution/accumulation/accumulation?type=' + this.type
				})
			},
			// 可提现
			goWithdrawal() {
				uni.navigateTo({
					url: '/distribution/withdrawal/withdrawal'
				})
			},
			// 未结算
			goSettlement() {
				uni.navigateTo({
					url: '/distribution/settlement/settlement?type=1&newType=' + this.type
				})
			},
			// 下拉框选择
			choice(e) {
				this.inputValue = this.actionSheetList[e].rank
				this.agentId = this.actionSheetList[e].id
			},
			// 点击分享
			shareBtn() {
				let that = this
				let id = that.agentId - 1
				console.log(id)
				if (that.inputValue == '') {
					uni.showToast({
						title: '请选择代理商级别',
						icon: 'none'
					})
				} else {
					that.share = {
						title: '邀请你成为代理',
						path: `/distribution/rechargeUpgrade/rechargeUpgrade?type=${id}`,
					}
				}
			},
			// 跳转页面
			go(type) {
				uni.navigateTo({
					url: '/distribution/settlement/settlement?type=' + type
				})
			}
		}
	}
</script>

<style lang="less">
	.distribution {
		.userInfo {
			width: 100vw;
			height: 250rpx;
			background-size: 100% 100%;
			flex-wrap: wrap;

			image {
				width: 122rpx;
				height: 122rpx;
				border-radius: 50%;
			}

			.list_r {
				width: 60%;
				margin-left: 20rpx;

				.list_r_t {
					.name {
						font-size: 28rpx;
						font-weight: bold;
						color: #FFFFFF;
					}

					.text {
						font-size: 24rpx;
						font-weight: 400;
						color: #FFFFFF;
					}
				}

				.list_r_b {
					margin-top: 30rpx;

					.titleBtn {
						box-sizing: border-box;
						padding: 0rpx 20rpx;
						width: auto;
						height: 42rpx;
						line-height: 42rpx;
						text-align: center;
						border-radius: 30rpx;
						background: linear-gradient(180deg, #FCD8A0 0%, #EABD6E 100%);
						font-size: 24rpx;
						font-weight: 500;
						color: #4B4B4B;
					}

					.money {
						font-size: 32rpx;
						font-weight: 400;
						color: #FFFFFF;
					}
				}
			}

			.list_b {
				width: 100%;
				color: #FFFFFF;
				font-size: 24rpx;
				font-weight: bold;
				text-align: center;
				letter-spacing: 20rpx;
				margin-top: -70rpx;
			}
		}

		//
		.statistics {
			width: 90vw;
			height: auto;
			margin: 0 auto;
			margin-top: -40rpx;
			box-sizing: border-box;
			padding: 30rpx;
			background-color: #FFFFFF;
			border-radius: 20rpx;

			.list {
				width: 30%;
				height: 132rpx;
				border-radius: 20rpx;
				box-sizing: border-box;
				padding: 20rpx;
				background-color: #F5F5F5;

				.name {
					color: #606060;
					font-size: 24rpx;
					font-weight: bold;
				}

				.number {
					margin-top: 20rpx;
					font-size: 20rpx;
					font-weight: 500;
					color: #9E9E9E;

					text {
						display: inline-block;
						font-size: 40rpx;
						color: #45806E;
					}
				}
			}
		}

		//
		.accountInfo {
			width: 90vw;
			height: auto;
			margin: 40rpx auto;
			box-sizing: border-box;
			padding: 30rpx;
			background-color: #FFFFFF;
			border-radius: 20rpx;

			.list_t {
				image {
					width: 40rpx;
					height: 40rpx;
				}

				.balance {
					font-size: 24rpx;
					font-weight: 500;
					color: #575757;
					margin-left: 20rpx;

					text {
						display: inline-block;
						font-size: 32rpx;
						color: #4B4B4B;
						margin-left: 20rpx;
					}
				}
			}

			.list_b {
				margin-top: 20rpx;

				.list {
					width: 45%;
					height: 132rpx;
					background-color: #F5F5F5;
					border-radius: 20rpx;

					image {
						width: 60rpx;
						height: 60rpx;
					}

					.list_c {
						.text {
							font-size: 24rpx;
							font-weight: bold;
							color: #606060;
						}

						.money {
							font-size: 40rpx;
							font-weight: 500;
							color: #45806E;

							text {
								display: inline-block;
								font-size: 20rpx;
								color: #9E9E9E;
							}
						}
					}
				}
			}
		}

		.iconList {
			width: 90vw;
			height: auto;
			background-color: #FFFFFF;
			border-radius: 20rpx;
			margin: 40rpx auto;

			.list {
				height: 172rpx;
				text-align: center;

				image {
					width: 64rpx;
					height: 54rpx;
					margin-top: 30rpx;
				}

				.text {
					font-size: 24rpx;
					font-weight: 500;
					color: #575757;
				}
			}
		}
	}
</style>
